<template>
  <view class="app-layout">
    <app-header :title="tit" />
    <view class="app-main">
      <view class="goods-container" @click.prevent='handleClickOutside'>
        <view class="" style=" flex: 1; overflow: hidden;">
          <scroll-view scroll-y="true" style="height: 100%">
            <view class="form-container">
              <u-form labelPosition="left" labelWidth="110px" :model="formData" ref="refFrom">
                <view class="info-tit"> 基本信息</view>
                <view class="form-con" style="padding-right:76px">
                  <uni-row :gutter="40">
                    <uni-col :span="12">
                      <u-form-item label="优惠券ID">
                        <uni-easyinput clearable v-model="formData.spuId" placeholder="请输入" disabled></uni-easyinput>
                      </u-form-item>
                    </uni-col>
                    <uni-col :span="12">
                      <u-row>
                        <view class="flex-label">
                          <u-form-item label="优惠券名称" required>
                            <uni-easyinput :maxlength="10" clearable v-model="formData.name" placeholder="请输入"
                              :disabled="name">
                              <template #right>
                                <text class="suffix-num">{{ (formData.name || '').length }}/10</text>
                              </template>
                            </uni-easyinput>
                          </u-form-item>
                        </view>


                        <view class="direction-container">
                          <view class="item" ref="tooltipContainer">
                            <image src="@/static/imgs/icon.png" mode="" class="icon-con" @click.stop="toggleTooltip">
                            </image>
                            <view class="tooltip-box" :class="{ show: isTooltipShow }" ref="tooltipRef">
                              <view class="tooltip-content">前台消费者可见</view>
                              <view class="tooltip-arrow"></view>
                            </view>
                          </view>
                        </view>
                      </u-row>
                    </uni-col>
                    <uni-col :span="16">
                      <u-row>
                        <view class="flex-label">
                          <u-form-item label="透出时间" required>
                            <uni-datetime-picker v-model="formData.datetimerange" type="datetimerange"
                              start-placeholder="开始透出时间" end-placeholder="结束透出时间" rangeSeparator="至" />
                          </u-form-item>
                        </view>

                        <view class="direction-container">
                          <view class="item">
                            <image src="../../static/imgs/icon.png" mode="" class="icon-con"
                              @click.stop="toggleTooltips">
                            </image>
                            <view class="tooltip-box" :class="{ show: isTooltipShows }" ref="tooltipRef">
                              <view class="tooltip-content">开始透出时间不得晚于开始使用时间；结束透出时间不得晚于结束使用时间。</view>
                              <view class="tooltip-arrow"></view>
                            </view>
                          </view>
                        </view>
                      </u-row>
                    </uni-col>
                    <uni-col :span="16">
                      <view class="usagetime">
                        <view class="flex-label" v-if="timeType">
                          <u-form-item label="使用时间" required>
                            <uni-datetime-picker v-model="formData.usagetime" type="datetimerange"
                              start-placeholder="开始使用时间" end-placeholder="结束使用时间" rangeSeparator="至" />
                          </u-form-item>
                        </view>
                        <view class="flex-labels" v-else>
                          <u-form-item label="使用时间" required>
                            <text style="margin-right: 11px;">券领取</text>
                            <uni-number-box :min="1" :max="999" v-model="formData.time" />
                            <text style="margin-left: 11px;">后天内使用，逾期失效</text>
                          </u-form-item>
                        </view>
                        <image src="@/static/imgs/change.png" mode="" @click.stop="changeTimeType">
                        </image>
                      </view>
                    </uni-col>

                    <uni-col :span="12">
                      <u-form-item label="使用场景" required>
                        <u-checkbox-group v-model="formData.sceneLabel" @change="checkboxChange">
                          <u-checkbox :customStyle="{ marginRight: '8px' }" label="门店自提" name="门店自提" />
                          <u-checkbox label="外卖配送" name="外卖配送" />
                        </u-checkbox-group>
                      </u-form-item>
                    </uni-col>
                    <uni-col :span="12">
                      <u-form-item label="领取方式" required>
                        <u-radio-group v-model="formData.isPublished">
                          <u-radio :customStyle="{ marginRight: '8px' }" label="手动领取" :name="0" />
                          <u-radio label="自动发放" :name="1" />
                        </u-radio-group>
                      </u-form-item>
                    </uni-col>
                    <uni-col :span="24">
                      <u-form-item label="优惠券说明" required>
                        <u-textarea v-model="formData.description" :placeholder="'请输入'" :maxlength="200" :rows="5"
                          :autosize="true" count></u-textarea>

                      </u-form-item>
                    </uni-col>
                  </uni-row>
                </view>
                <view class="info-tit"> 活动商品及优惠信息 </view>
                <view class="form-con" style="padding: 0 52px;">
                  <view class="form-head">
                    <view class="form-head-left">
                      <view class="specifications" @click="generateSpecs"> +添加商品</view>
                      <text class="num">（{{tableGoods.length}}/10）</text>
                    </view>
                    <view class="form-head-right">

                      <uni-easyinput placeholder="券面额" type="digit" clearable v-model="couponAmount">
                      </uni-easyinput>
                      <uni-easyinput placeholder="发放总数" type="number" clearable v-model="totalNum">
                      </uni-easyinput>
                      <uni-easyinput placeholder="每人限领数" type="number" clearable v-model="limitPerPerson">
                      </uni-easyinput>
                      <view class="filling" @click="batchFill"> 批量填写</view>
                    </view>
                  </view>
                  <uni-table border stripe emptyText="暂无更多数据">
                    <uni-tr>
                      <uni-th width="150" align="left">SPU</uni-th>
                      <uni-th width="150" align="left">商品名称</uni-th>
                      <uni-th width="150" align="left">分类</uni-th>
                      <uni-th width="150" align="left"><text class="start">
                          *</text>券面额(元)</uni-th>
                      <uni-th width="150" align="left">
                        <view class="direction-container">
                          <view class="item" ref="tooltipContainer">
                            券后价(元)
                            <image src="@/static/imgs/icon.png" mode="" class="icon-con" @click.stop="_toggleTooltip">
                            </image>
                            <view class="tooltip-box" :class="{ show: _isTooltipShow }" ref="tooltipRef">
                              <view class="tooltip-content">售价/规格最低价格”-“券面额</view>
                              <view class="tooltip-arrow"></view>
                            </view>
                          </view>
                        </view>
                      </uni-th>
                      <uni-th width="150" align="left"><text class="start">
                          *</text>发放总数(张)</uni-th>
                      <uni-th width="150" align="left"><text class="start">
                          *</text>每人限领(张)</uni-th>
                      <uni-th align="left" width="100">操作</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(row, rIndex) in tableGoods" :key="rIndex">
                      <uni-td>
                        SP1234567
                      </uni-td>
                      <uni-td>
                        商品名称1
                      </uni-td>
                      <uni-td>
                        咖啡/拿铁
                      </uni-td>
                      <uni-td>
                        <uni-easyinput  placeholder="请输入" type="digit" clearable v-model="row.couponAmount">
                        </uni-easyinput>
                      </uni-td>
                      <uni-td>
                        15
                      </uni-td>
                      <uni-td>
                        <uni-easyinput placeholder="请输入" type="number" clearable v-model="row.totalNum">
                        </uni-easyinput>
                      </uni-td>
                      <uni-td>
                        <uni-easyinput placeholder="请输入" type="number" clearable v-model="row.limitPerPerson">
                        </uni-easyinput>
                      </uni-td>

                      <uni-td>
                        <u-icon name="trash" color="#0F90FD" size="20" @click="delelGroups(rIndex,1)"></u-icon>
                      </uni-td>
                    </uni-tr>
                  </uni-table>
                  <view class="total-num"> 共{{tableGoods.length}}个商品</view>
                </view>
                <view class="info-tit"> 参与对象</view>
                <view class="form-con" style="padding: 0 52px 29px">
                  <view class="form-head">
                    <view class="form-head-left" style="flex:2">
                      <view class="crowd-name">
                        <text class="start">
                          *</text>活动人群：
                      </view>
                      <u-radio-group v-model="formData.crowd">
                        <u-radio :customStyle="{ marginRight: '8px' }" label="全部用户" :name="0" />
                        <u-radio :customStyle="{ marginRight: '8px' }" label="指定等级" :name="1" />
                        <u-radio label="指定用户" :name="2" />
                      </u-radio-group>
                      <view class="crowd-btn-wrap">
                        <view class="crowd-btn" v-if="formData.crowd==2" @click="generateSpecs"> +选择用户</view>
                        <view class="crowd-btn" v-if="formData.crowd==1" @click="generateSpecs"> +选择等级</view>
                      </view>
                    </view>
                    <view class="form-head-right" style="flex: 1;" v-if="formData.crowd==2">
                      <u-search placeholder="请输入用户名称" v-model="keyword" clearable bgColor="#fff" borderColor="#e5e5e5"
                        :showAction="false" @search="handleSearch" @clear="handleReset"></u-search>

                      <view class="search" @click="handleSearch"> 搜索</view>
                    </view>
                  </view>
                  <template v-if="formData.crowd==1">
                    <uni-table border stripe emptyText="暂无更多数据">
                      <uni-tr>
                        <uni-th align="left">等级名称</uni-th>
                        <uni-th align="left">用户数量</uni-th>
                        <uni-th align="left">操作</uni-th>
                      </uni-tr>
                      <uni-tr v-for="(row, rIndex) in tableLevel" :key="rIndex">
                        <uni-td>
                          {{row.name}}
                        </uni-td>
                        <uni-td>
                          {{row.num}}
                        </uni-td>

                        <uni-td>
                          <u-icon name="trash" color="#0F90FD" size="20" @click="delelGroups(rIndex,2)"></u-icon>
                        </uni-td>
                      </uni-tr>
                    </uni-table>
                    <view class="total-num"> 共{{tableLevel.length}}个等级，{{totalUsers}}个用户</view>
                  </template>
                  <template v-if="formData.crowd==2">
                    <uni-table border stripe emptyText="暂无更多数据">
                      <uni-tr>
                        <uni-th align="left">用户名称</uni-th>
                        <uni-th align="left">手机号</uni-th>
                        <uni-th align="left">操作</uni-th>
                      </uni-tr>
                      <uni-tr v-for="(row, rIndex) in tableUser" :key="rIndex">
                        <uni-td>
                          {{row.name}}
                        </uni-td>
                        <uni-td>
                          {{row.phone}}
                        </uni-td>

                        <uni-td>
                          <u-icon name="trash" color="#0F90FD" size="20" @click="delelGroups(rIndex,3)"></u-icon>
                        </uni-td>
                      </uni-tr>
                    </uni-table>
                    <view class="total-num"> 共{{tableUser.length}}个用户</view>
                  </template>
                </view>

              </u-form>
            </view>
          </scroll-view>
        </view>
        <view class="submit_btncon">
          <view style="display: flex; margin: auto">
            <button class="submit_close" @click="close">取消</button>
            <button class="submit_btn" @click="submit">确认</button>
          </view>
        </view>
        <!-- <addPopup v-if="showPopup" :showPopup="showPopup" :titPopup="titPopup" @cancelPopup="cancelPopup"
          @surePopup="surePopup" :listPopup="listPopup" :valuePopup="valuePopup" /> -->
      </view>

    </view>
  </view>
</template>
<script setup>
  import {
    ref,
    watch,
    nextTick,
    computed,
    onMounted,
    onUnmounted
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getTreeCategory,
    updateSassCategoryById,
    addSassCategory,
    getAttributeDefinitions,
    getAddonOptions,
    addSassSpecs,
    findSpecsList,
    addProducts,
    updateProducts,
    getBySpuId
  } from '@/requests/apis/products'
  import {
    uploadImgApi
  } from '@/requests/apis/user'
  import
  addPopup
  from '@/components/addPopup/index.vue'
  const editorIns = ref(null)
  let spuId = ref()
  let tit = ref('新增立减券')
  let show = ref(false)
  let showPopup = ref(false)
  let titPopup = ref()
  let listPopup = ref([])
  let vipLevelList = ref([])
  let valuePopup = ref()
  let timeType = ref(true) //使用时间类型
  let equityType = ref(false) //权益类型
  let tableGoods = ref([{}])
  // 关键词（绑定搜索框）
  const keyword = ref('');
  // 原始用户数据
  const originalTableUser = ref([{
      name: "张三",
      phone: "13453465"
    },
    {
      name: "李四",
      phone: "13453465"
    },
    {
      name: "张三峰",
      phone: "13453465"
    },
  ]);
  let tableUser = ref([])
  let tableLevel = ref([{
      name: "lv1",
      num: 123
    },
    {
      name: "lv2",
      num: 14
    },
    {
      name: "lv3",
      num: 16
    },
  ])
  let formData = ref({
    spuId: "*",
    datetimerange: [],
    usagetime: [],
    time: '',
    sceneLabel: ['门店自提', '外卖配送'],
    isPublished: 1,
    method: 1,
    equityType: 1,
    restriction: 0,
    range: [],
    couponId: [],
    crowd: 0
  })
  let vipList = ref([])
  let range = ref([])
  // 存储从选择页接收的优惠券
  const receivedCoupons = ref([]);
  const uploadedImagesOne = ref([]);
  // 批量填写的临时值
  const couponAmount = ref('')
  const totalNum = ref('')
  const limitPerPerson = ref('')
  // 控制提示框显示状态
  const isTooltipShow = ref(false)
  const isTooltipShows = ref(false)
  const _isTooltipShow = ref(false)
  const iconRef = ref(null); // 图标元素
  const tooltipRef = ref(null); // 提示框元素
  const tooltipContainer = ref(null); // 容器元素
  // 点击图标：切换提示框显示/隐藏
  const toggleTooltip = () => {
    isTooltipShow.value = !isTooltipShow.value
    isTooltipShows.value = false
    _isTooltipShow.value = false
  }

  const toggleTooltips = () => {
    isTooltipShows.value = !isTooltipShows.value
    isTooltipShow.value = false
    _isTooltipShow.value = false
  }
  const _toggleTooltip = () => {
    _isTooltipShow.value = !_isTooltipShow.value
    isTooltipShow.value = false
    isTooltipShows.value = false
  }

  // 全局点击事件处理函数
  const handleClickOutside = (e) => {
    isTooltipShow.value = false
    isTooltipShows.value = false
  };
  onLoad(async (e) => {
    tableUser.value = [...originalTableUser.value];
    console.log(e, '1111111');
    if (e.spuId) {
      spuId.value = e.spuId;
      tit.value = '编辑立减券';
      getDetail(e.spuId);
    }

    getList();
  });
  const handleReceiveCoupons = (coupons) => {
    console.log(coupons, '收到选中的优惠券');
  };
  onMounted(() => {
    uni.$on('receive-selected-coupons', handleReceiveCoupons);
  });

  onUnmounted(() => {
    uni.$off('receive-selected-coupons', handleReceiveCoupons);
  });
  // 搜索逻辑
  const handleSearch = () => {
    const key = keyword.value.trim().toLowerCase();
    if (!key) {
      tableUser.value = [...originalTableUser.value];
      return;
    }
    // 过滤：匹配名称
    tableUser.value = originalTableUser.value.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(key);
      return nameMatch
    });
  };

  // 清除搜索（重置）
  const handleReset = () => {
    keyword.value = '';
    tableUser.value = [...originalTableUser.value];
  };

  // 选择使用时间类型
  const changeTimeType = () => {
    timeType.value = !timeType.value
  }
  // 选择权益类型
  const changeType = (e) => {
    console.log(e, 'eeeee')
    if (e == 0) {
      equityType.value = true
    } else {
      equityType.value = false
    }
  }
  // 选择日期
  const handleTime = (e) => {
    formData.value.range = e
    // if (e.length > 0) {
    //   pageInfo.startDate = e[0] + ' ' + '00:00:00'
    //   pageInfo.endDate = e[1] + ' ' + '23:59:59'
    // } else {
    //   pageInfo.startDate = undefined
    //   pageInfo.endDate = undefined
    // }
  }
  // 选择优惠券
  const handleCoupon = () => {
    uni.navigateTo({
      url: `/pages/vip/interests/selectCoupon?couponId=${formData.value.couponId}`,
    })
  }
  // 累加所有等级的用户数量
  const totalUsers = computed(() => {
    return tableLevel.value.reduce((sum, row) => {
      return sum + Number(row.num || 0);
    }, 0);
  });
  // 删除
  const delelGroups = (index, type) => {
    if (type == 1) {
      tableGoods.value.splice(index, 1);
    }
    if (type == 2) {
      tableLevel.value.splice(index, 1);
    }
    if (type == 3) {
      const deletedItem = tableUser.value.splice(index, 1)[0];
      originalTableUser.value = originalTableUser.value.filter(
        item => !(item.name === deletedItem.name && item.phone === deletedItem.phone)
      );
    }

  };
  const getList = async () => {
    let res = await getAttributeDefinitions({
      page: 1,
      limit: 1000,
      status: 1
    })
    vipList.value = res.Result.records || [];
  }
  const getDetail = async (spuId) => {

  }
  const addVIP = (type) => {
    let arr = []
    vipLevelList.value.forEach((item) => {
      arr.push(item.definitionId)
    })
    valuePopup.value = arr
    listPopup.value = JSON.parse(JSON.stringify(vipList.value))
    showPopup.value = true
    titPopup.value = type
  }

  // 添加商品 确定
  const surePopup = (type, checkboxData) => {
    showPopup.value = false;
    vipLevelList.value = vipList.value
      .filter(item => checkboxData.includes(item.definitionId)) // 先过滤
      .map(item => JSON.parse(JSON.stringify(item))); // 对每个元素深拷贝
    console.log(vipLevelList.value)
    // vipLevelList.value.map(item => item.name).join(',')
    formData.value.level = vipLevelList.value.map(item => item.name).join(',');
  }
  const cancelPopup = (type) => {
    showPopup.value = false
  }
  // 批量填写逻辑：将批量值赋给所有规格行
  const batchFill = () => {
    console.log(couponAmount.value,'couponAmount.value')
    tableGoods.value.forEach((row) => {
      row.couponAmount = couponAmount.value
      row.totalNum = totalNum.value
      row.limitPerPerson = limitPerPerson.value
    })
  }
  const back = () => {}
const submit = () => {
  console.log(formData.value, 'FODOFR');
  let err = '';
  const intReg = /^[1-9]\d*$/; // 正整数正则
  const decimal2Reg = /^\d+(\.\d{2})?$/; // 2位小数正则
  const showError = (message) => {
    uni.showToast({
      title: message,
      duration: 2000,
      icon: 'none'
    });
    return true; // 返回true用于中断流程
  };
  // 基础必填项校验
  const topRequired = [
    { k: 'name', err: '请输入优惠券名称' },
    { k: 'sceneLabel', err: '请选择使用场景' },
    { k: 'description', err: '请输入优惠券说明' }
  ];

  for (const item of topRequired) {
    if (!formData.value[item.k] && formData.value[item.k] !== 0) {
      if (showError(item.err)) return;
    }
    if (item.validate && !item.validate(formData.value[item.k])) {
      if (showError(item.validateErr)) return;
    }
  }

  // 时间校验：开始/结束透出时间与使用时间的关系
  // 1. 检查透出时间是否完整（必须是长度为2的数组且不为空）
  const { datetimerange: showTimeRange } = formData.value;
  if (!showTimeRange || showTimeRange.length !== 2 || !showTimeRange[0] || !showTimeRange[1]) {
    if (showError('请选择完整的透出时间范围')) return;
  }
  const [startShow, endShow] = showTimeRange; // 开始透出时间、结束透出时间

  // 2. 根据使用时间类型（timeType）获取使用时间范围
  let startUse, endUse;
  if (timeType.value) {
    // 场景1：使用时间为日期范围（datetimerange）
    const { usagetime: useTimeRange } = formData.value;
    if (!useTimeRange || useTimeRange.length !== 2 || !useTimeRange[0] || !useTimeRange[1]) {
      if (showError('请选择完整的使用时间范围')) return;
    }
    [startUse, endUse] = useTimeRange; // 开始使用时间、结束使用时间
  } else {
    // 场景2：使用时间为“领取后N天内”（需转换为具体时间范围）
    const { time: validDays } = formData.value;
    console.log(validDays, 'validDaysvalidDays')
    if (!validDays || validDays < 1) {
      if (showError('请设置有效的使用天数（至少1天）')) return;
    }
    // 开始使用时间默认为“领取时间”，但透出时间需早于领取时间，这里简化为：
    // 开始使用时间 = 开始透出时间（最早可能的领取时间）
    // 结束使用时间 = 开始使用时间 + N天
    // startUse = startShow;
    // // 转换开始使用时间为时间戳，加N天（毫秒）
    // const startUseTimeStamp = new Date(startUse).getTime();
    // const endUseTimeStamp = startUseTimeStamp + validDays * 24 * 60 * 60 * 1000;
    // endUse = new Date(endUseTimeStamp).toISOString().slice(0, 19).replace('T', ' '); // 格式化为yyyy-MM-dd hh:mm:ss
  }

  // 3. 转换时间为时间戳（便于比较）
  const startShowTime = new Date(startShow).getTime();
  const endShowTime = new Date(endShow).getTime();
  const startUseTime = new Date(startUse).getTime();
  const endUseTime = new Date(endUse).getTime();

  // 4. 核心校验规则
  if (startShowTime > startUseTime) {
    err = '开始透出时间不得晚于开始使用时间';
  } else if (endShowTime > endUseTime) {
    err = '结束透出时间不得晚于结束使用时间';
  }
  if (err) {
    if (showError(err)) return;
  }

  // 商品数据校验
  if (!tableGoods.value || tableGoods.value.length === 0) {
    if (showError('请添加至少一条商品优惠券数据')) return;
  }
  // 表格数据逐行校验
  for (let i = 0; i < tableGoods.value.length; i++) {
    const row = tableGoods.value[i];
    // 重置行内错误
    err = '';

    // 校验券面额
    if (!row.couponAmount) {
      err = `券面额不能为空`;
    } else if (!decimal2Reg.test(row.couponAmount)) {
      err = `券面额必须为整数或两位小数`;
    } else if (Number(row.couponAmount) <= 0) {
      err = `券面额必须大于0`;
    }

    // 校验发放总数
    if (!err && !row.totalNum) {
      err = `发放总数不能为空`;
    } else if (!err && !intReg.test(row.totalNum)) {
      err = `发放总数必须是大于0的整数`;
    }

    // 校验每人限领
    if (!err && !row.limitPerPerson) {
      err = `每人限领不能为空`;
    } else if (!err && !intReg.test(row.limitPerPerson)) {
      err = `每人限领必须是大于0的整数`;
    } else if (!err) {
      const limit = Number(row.limitPerPerson);
      const total = Number(row.totalNum);
      if (limit >= total) {
        err = `每人限领张数必须小于发放总数`;
      }
    }

    // 行内校验失败，中断循环
    if (err) {
      if (showError(err)) return;
    }
  }

  if (formData.value.crowd==2) {
    if(!tableUser.value || tableUser.value.length === 0){
       if (showError('请添加至少一条指定用户数据')) return;
    }

  }
  if (formData.value.crowd==1) {
    if(!tableLevel.value || tableLevel.value.length === 0){
       if (showError('请添加至少一条指定等级数据')) return;
    }

  }

  // 所有校验通过，执行提交逻辑
  console.log('校验通过，可提交表单');
  // ... 提交接口逻辑
};
  const submitReq = async () => {

  }
  const close = () => {
    uni.navigateBack()
  }
</script>
<style lang="scss" scoped>
  :deep(.is-disabled) {
    color: #333 !important;
  }

  :deep(.uni-date-x) {
    height: 32px !important;
    line-height: 32px !important;
  }

  .goods-container {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    margin: 10px 10px 0;
    display: flex;
    flex-direction: column;
    :deep(.uni-date-mask--pc) {
      position: static !important;
    }

    .form-con {
      padding: 0 0px 0 67px;
      box-sizing: border-box;

      .form-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px;

        :deep(.u-radio-group) {
          flex: initial !important;
        }

        .form-head-left {
          display: flex;
          align-items: center;
          flex: 1;

          .specifications {
            background: #0F90FD;
            border-radius: 8px;
            padding: 7px 9px;
            box-sizing: border-box;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }

          .crowd-name {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }

          .crowd-btn-wrap {
            margin-left: 19px;

            .crowd-btn {
              padding: 7px 9px;
              box-sizing: border-box;
              background: rgba(15, 144, 253, 0.1);
              border-radius: 8px;
              font-weight: 400;
              font-size: 14px;
              color: #0F90FD;
            }
          }

          .num {
            font-weight: 400;
            font-size: 14px;
            color: #0F90FD;
          }
        }

        .form-head-right {
          display: flex;
          gap: 10px;
          flex: 2;

          .search {
            background: #0F90FD;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            padding: 7px 23px;
            box-sizing: border-box;
            border-radius: 100px;
          }

          .filling {
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #0F90FD;
            font-weight: 400;
            font-size: 14px;
            color: #0F90FD;
            padding: 7px 15px;
            box-sizing: border-box;
          }
        }
      }

      .total-num {
        font-weight: 400;
        font-size: 12px;
        color: #333333;
        line-height: 17px;
        margin-top: 8px;
        text-align: right;
        padding-right: 15px;
        box-sizing: border-box;
      }

      .flex-label {
        flex: 1;
      }

      .flex-labels {
        text {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
      }

      .direction-container {
        display: flex;
        align-items: center;
        margin-left: 8px;

        .item {
          position: relative;

          .tooltip-box {
            width: 160px;
            position: absolute;
            left: 50%;
            top: calc(100% + 6px);
            transform: translateX(-50%);
            background: rgba(47, 75, 153, 0.8);
            font-size: 14px;
            color: #fff;
            padding: 8px;
            box-sizing: border-box;
            border-radius: 6px;
            z-index: 9999;
            display: none;

            &.show {
              display: block;
            }
          }

          .tooltip-arrow {
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(47, 75, 153, 0.8);
            border-bottom: 6px solid rgba(47, 75, 153, 0.8);
            border-top: none;
          }
        }
      }

      .icon-con {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        cursor: pointer;
      }

      .usagetime {
        display: flex;
        align-items: center;

        image {
          width: 28px;
          height: 28px;
          margin-left: 10px;
        }
      }

      // :deep(.u-form-item__body__right__content__slot) {
      //   flex-direction: column !important;
      //   align-items: baseline !important;
      // }

      .suffix-txt {
        background: #f5f6f8;
        border-left: 1px solid #e8ecef;
        font-weight: 400;
        font-size: 14px;
        color: #334681;
        padding: 6px 13px;
        box-sizing: border-box;
      }

      .suffix-num {
        font-weight: 400;
        font-size: 14px;
        color: rgba(51, 70, 129, 0.6);
        padding-right: 5px;
        box-sizing: border-box;
      }

      :deep(.u-button) {
        height: 32px;
        width: 100px;
        margin-left: 10px;
      }
    }

    .info-tit {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      padding-left: 37px;
      box-sizing: border-box;
      margin: 25px 0 10px;
    }
  }
</style>
